<template>
  <div class="image-container">
      <el-row class="header custom-border">
        <el-date-picker
          v-model="screenshotTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="refresh"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <el-button circle icon="el-icon-close" class="btn-close" @click="close" plain type="primary"></el-button>
      </el-row>
      <el-row class="container  custom-border" :gutter="20">
        <ft-scroll >
          <el-col :span="6" v-for="item of images" :key="item.event_image_uuid" class="my-image">
            <el-image fit="fill" :src="config.video.baseURL + '/image'+item.path" lazy></el-image>
          </el-col>
        </ft-scroll>
      </el-row>
      <el-row type="flex" justify="center" class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="page.sizes"
          :page-size="page.size"
          :current-page="page.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { viewScreenshot  } from "./api";
import {config} from "../../../../../config/env-configs"


export default {
  name: "ViewScreenshot",
  props: {
    data: Object
  },
  data: () => ({
      images: [],
      screenshotTime: [],
      config: config,
      page:{
        total:0,
        currentPage:1,
        size: 20,
        sizes:[10,20,50,100]
      }
  }),
  mounted(){
    this.screenshotTime = [this.dayjs().add(-10, 'days').format('YYYY-MM-DD HH:mm:ss'), this.dayjs().format('YYYY-MM-DD HH:mm:ss')]
    this.refresh(this.screenshotTime)
  },
  methods: {
    async refresh(time) {
      if(time === null || time === undefined) time = [];
      let { data } = await viewScreenshot({
        live_uuid: this.data.uu_id,
        start_date: time[0],
        end_date: time[1],
        // project_id: this.data.project_id
        page: this.page.currentPage,
        num: this.page.size,
      });
      if (data.errno === 0) {
        this.images = data.images;
        this.page.total = data.total_num;
      } else {
        this.$message({
          type: "error",
          message: data.message
        });
      }
    },
    close(e){ 
      this.$parent.viewScreenshotVisible = false;
      this.$emit('close', e)
    },
    handleSizeChange: function(size) {
      this.page.currentPage = 1;
      this.page.size = size;
      this.refresh(this.screenshotTime)


    },
    handleCurrentChange: function(page) {
      this.page.currentPage = page;
      this.refresh(this.screenshotTime)
    }
  },
};
</script>

<style lang="scss"  scoped>
.image-container {
  display: flex;
  flex-direction: column;
  background:  linear-gradient(to bottom right, #041616, #2f5560);
  width: calc(100% - 20px);
  height: calc(100vh - 80px);
  box-sizing: border-box;
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 10;
  .container{
    padding-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 200px);
    margin: 0 !important;
    .ft-scroll{
      height: 100%;
    }

  }
 .header{
    width: 100%;
    padding: 15px;

    .btn-close{
      float: right;
    }
  }

  .my-image{
    margin-bottom: 20px;
  }
  .pagination{
    margin-top: 10px;
  }
}
</style>
